<template>
  <div class="search-wrap">
      <input type="text">
      <!-- <span>123</span> -->
  </div>
</template>

<script>
export default {
  name:'SearchInput',
  
}
</script>

<style lang="scss" scoped>
.search-wrap {
    position: fixed;
    left: 0;
    z-index: 1;
    width: 100%;
    height: .38rem;
    padding: .03rem .1rem;
    box-sizing: border-box;
    background-color:#DB7093;

    input {
        position: absolute;
        top: 0rem;  
        width:90%;
        height:95%;
        font-size: .14rem;
        border: 1px solid #ddd;
        text-indent: .1rem;
        border-radius: 0.3rem;
        outline:none;
        border-bottom: 1px solid #ddd;
       
     
     &:focus {
        border-color: #ed4040;
        box-shadow: 0 0 .02rem #ed4040;
        transition: all .3s;
    }        
   }
    span{
          float: right;
          font-size: .14rem;
        }
}

</style>